<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			.p1 li{
				display: inline-block;
				padding: 0 10px;
			}
			
			.p2{
				list-style-type: none;
				margin: 0;
				padding: 0;
				background-color: black;
				position: fixed;
				width: 100%;
			}
			.p2 li{
				display: inline-block;
				padding: 10px;
				border-right:1px solid #bbb;
			}
			.p2 li a{
				text-decoration: none;
				color: white;
			}
			
			.p2 li:hover:not(.active){
				background-color: aqua;
			}
			
			.active{
				background-color: #4CAF50;
			}
			
			body{
				margin: 0;
				padding: 0;
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<!--内联列表项-->
		<ul class="p1">
			<li><a href="javaScript:void(0);">主页</a></li>
			<li><a href="javaScript:void(0);">新闻</a></li>
			<li><a href="javaScript:void(0);">联系</a></li>
			<li><a href="javaScript:void(0);">关于</a></li>
		</ul>
		<!--水平导航条实例-->
		<ul class="p2">
			<li class="active"><a href="javaScript:void(0);">主页</a></li>
			<li><a href="javaScript:void(0);">新闻</a></li>
			<li><a href="javaScript:void(0);">联系</a></li>
			<li style="float: right;" class="active"><a href="javaScript:void(0);">关于</a></li>
		</ul>
	</body>
</html>